<template>
  <el-icon :size="font" :color="color"><component :is="icon" /></el-icon>
</template>
<script lang="ts" setup>
  import { Face, faceToColor, Icon, Size, sizeToFont } from '../elementUI';
  import { computed } from 'vue';

  const props = defineProps<{
    size?: Size;
    face?: Face;
    icon: Icon;
  }>();

  const color = computed<string>(() => {
    return faceToColor(props.face);
  });

  const font = computed<number>(() => {
    return sizeToFont(props.size);
  });
</script>
